<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索用户</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .search-form {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 30px;
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
            align-items: end;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        .button-group {
            grid-column: 1 / -1;
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"], input[type="number"], select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        input[type="text"]:focus, input[type="number"]:focus, select:focus {
            border-color: #4CAF50;
            outline: none;
        }
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 120px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn:hover {
            background-color: #45a049;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .btn-secondary {
            background-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        .results {
            margin-top: 30px;
        }
        .user-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 15px;
            background-color: #fff;
        }
        .user-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        .info-item {
            display: flex;
            flex-direction: column;
        }
        .info-label {
            font-weight: bold;
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }
        .info-value {
            color: #333;
            font-size: 16px;
        }
        .status-active {
            color: #28a745;
            font-weight: bold;
        }
        .status-inactive {
            color: #dc3545;
            font-weight: bold;
        }
        .no-results {
            text-align: center;
            color: #666;
            font-style: italic;
            margin-top: 30px;
        }
        .nav-links {
            text-align: center;
            margin-bottom: 20px;
        }
        .nav-links a {
            color: #007bff;
            text-decoration: none;
            margin: 0 15px;
        }
        .nav-links a:hover {
            text-decoration: underline;
        }
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-error {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav-links">
            <a href="/add-user">添加用户</a>
        </div>
        
        <h1>搜索用户</h1>
        
        <div id="errorAlert" class="alert alert-error" style="display: none;"></div>
        
        <div class="search-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="searchId">用户ID:</label>
                    <input type="number" id="searchId" name="searchId" placeholder="输入用户ID">
                </div>
                <div class="form-group">
                    <label for="searchUsername">用户名:</label>
                    <input type="text" id="searchUsername" name="searchUsername" placeholder="输入用户名">
                </div>
                <div class="form-group">
                    <label for="searchType">用户类型:</label>
                    <select id="searchType" name="searchType">
                        <option value="1">普通用户</option>
                        <option value="2">VIP用户</option>
                        <option value="3">管理员</option>
                    </select>
                </div>
            </div>
            <div class="button-group">
                <button type="button" class="btn" onclick="searchById()">按ID搜索</button>
                <button type="button" class="btn btn-secondary" onclick="searchByUsername()">按用户名搜索</button>
            </div>
        </div>
        
        <div class="results" id="results" style="display: none;">
            <h3>搜索结果</h3>
            <div id="userResults"></div>
        </div>
        
        <div class="no-results" id="noResults" style="display: none;">
            未找到匹配的用户
        </div>
    </div>

    <script>
        function showError(message) {
            const errorAlert = document.getElementById('errorAlert');
            errorAlert.textContent = message;
            errorAlert.style.display = 'block';
            setTimeout(() => {
                errorAlert.style.display = 'none';
            }, 5000);
        }
        
        function hideResults() {
            document.getElementById('results').style.display = 'none';
            document.getElementById('noResults').style.display = 'none';
        }
        
        function displayUser(user) {
            const resultsDiv = document.getElementById('results');
            const userResultsDiv = document.getElementById('userResults');
            
            const statusClass = user.status === 1 ? 'status-active' : 'status-inactive';
            const statusText = user.status === 1 ? '激活' : '禁用';
            
            userResultsDiv.innerHTML = `
                <div class="user-card">
                    <div class="user-info">
                        <div class="info-item">
                            <span class="info-label">用户ID</span>
                            <span class="info-value">${user.id}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">用户名</span>
                            <span class="info-value">${user.username}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">手机号</span>
                            <span class="info-value">${user.phone || '未设置'}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">状态</span>
                            <span class="info-value ${statusClass}">${statusText}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">创建时间</span>
                            <span class="info-value">${user.createTime || '未知'}</span>
                        </div>
                    </div>
                </div>
            `;
            
            resultsDiv.style.display = 'block';
            document.getElementById('noResults').style.display = 'none';
        }
        
        function showNoResults() {
            document.getElementById('results').style.display = 'none';
            document.getElementById('noResults').style.display = 'block';
        }
        
        async function searchById() {
            const id = document.getElementById('searchId').value;
            
            if (!id) {
                showError('请输入用户ID');
                return;
            }
            
            try {
                const response = await fetch(`/users/${id}`);
                
                if (response.ok) {
                    const user = await response.json();
                    if (user) {
                        displayUser(user);
                    } else {
                        showNoResults();
                    }
                } else if (response.status === 404) {
                    showNoResults();
                } else {
                    const error = await response.text();
                    showError('搜索失败: ' + error);
                }
            } catch (error) {
                showError('网络错误: ' + error.message);
            }
        }
        
        async function searchByUsername() {
            const username = document.getElementById('searchUsername').value;
            const type = document.getElementById('searchType').value;
            
            if (!username) {
                showError('请输入用户名');
                return;
            }
            
            try {
                const response = await fetch(`/users?username=${encodeURIComponent(username)}&type=${type}`);
                
                if (response.ok) {
                    const user = await response.json();
                    if (user) {
                        displayUser(user);
                    } else {
                        showNoResults();
                    }
                } else if (response.status === 404) {
                    showNoResults();
                } else {
                    const error = await response.text();
                    showError('搜索失败: ' + error);
                }
            } catch (error) {
                showError('网络错误: ' + error.message);
            }
        }
        
        // 清空搜索结果当输入改变时
        document.getElementById('searchId').addEventListener('input', hideResults);
        document.getElementById('searchUsername').addEventListener('input', hideResults);
        document.getElementById('searchType').addEventListener('change', hideResults);
    </script>
</body>
</html>